<template>
	<view class="appeal">
		<view class="aa">
			<view :class="active?'change1':'change'">
				<view class="">
					请选择一个惩罚
				</view>
				<image src="../../static/down.png" mode="" @click="down"></image>
			</view>
		</view>

		<view class="content" :class="active1?'content1':'content'">
			<input type="text" value="" placeholder="请描述处罚申诉内容(不少于20字)" />
			<view class="bottom">
				<view class="submit">
					提交申请
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "appeal",
		data() {
			return {
				active: false,
				active1: false,
			}
		},
		methods: {
			down() {
				this.active = !this.active;
				this.active1 = !this.active1;
			},
		}
	}
</script>

<style scoped>
	.appeal {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}
	.aa{
		display: flex;
	}

	.content {
		width: 100%;
		height: 608rpx;
		margin-top: 3%;
		    padding-top: 4%;
		background: #FFFFFF;
	}

	.content1 {
		width: 100%;
		height: 1000rpx;
		margin-top: 4%;
		    padding-top: 4%;
		background: #FFFFFF;
	}

	.content input {
		border: 1px solid;
		width: 80%;
		margin: 0 auto;
		height: 100px;
		border-radius: 14rpx;
	}

	.uni-input-placeholder {
		margin-top: -19%;
	}

	.change {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24rpx;
		height: 600rpx;
		background: #FFFFFF;
		margin-top: 2%;
		width: 100%;
	}

	.change1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24rpx;
		height: 200rpx;
		background: #FFFFFF;
		margin-top: 2%;
		width: 100%;
	}

	.change view {
		font-weight: 600;
		font-size: 30rpx;
	}

	.change image {
		width: 30rpx;
		height: 30rpx;
	}

	.change1 view {
		font-weight: 600;
		font-size: 30rpx;
	}

	.change1 image {
		width: 30rpx;
		height: 30rpx;
	}

	.bottom {
		margin: 0 auto;
		width: 94%;
		margin-top: 30%;
	}

	.submit {
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(53, 199, 233), rgb(30, 141, 255));
	}
</style>
